<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <parent></parent>
    </div>
    <template id="parentT">
        <div>
            父组件
            <!-- 调用子组件  处理函数不要加（） -->
            <child @chan="getCmsg"></child>
            接收到的子组件值为：{{msg}}
        </div>
    </template>
    <template id="childT">
        <div>
            子组件
            <button @click="fn()">子传参</button>
        </div>
    </template>
    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            components:{
                parent:{
                    template:"#parentT",
                    data(){
                        return {
                            msg:''
                        }
                    },
                    methods:{
                        getCmsg(val){
                            this.msg = val
                        }
                    },
                    components:{
                        child:{
                            template:"#childT",
                            data(){
                                return {
                                    cmsg:"子组件的数据"
                                }
                            },
                            methods:{
                                fn(){
                                    // 传递参数
                                    this.$emit("chan",this.cmsg)
                                }
                            }
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>